<template>
  <!-- 手机打开主页 -->
  <div class="bg-hero-pattern">
    <div class="relative flex h-16 items-center justify-between">
      <ul ref="ulTarget" class="navbar navbar-default">
        <!-- 以下为自定义样式 -->
        <!-- bg-info.bg-gradient sticky top-0 left-0 z-10 -->
        <!-- class="relative flex overflow-x-auto p-1 text-xs text-zinc-700 overflow-hidden" -->
        <!-- shrink-0 px-2 py-0.5 z-10 duration-200 -->
        <!-- navbar navbar-default navbar-fixed-top
        relative flex h-16 items-center justify-between
        -->
        <!-- 滑块 -->
        <li
          ref="sliderTarget"
          :style="sliderStyle"
          class="absolute h-[24px] bg-pink-300 bg-opacity-0 rounded-lg duration-200"
        ></li>
        <li class="fixed right-2">
          <!-- <van-icon class="w-2.5 h-1.5" name="fire-o" color="#ee0a24" /> -->
          <van-icon name="apps-o" @click="showPopup" />
          <!-- 弹出框 -->
          <van-popup
            v-model:show="show"
            round
            position="bottom"
            closeable
            close-icon="close"
            :style="{ height: '60%' }"
          >
            <van-cell value="  " />
            <van-cell value="  " />
            <van-cell value="  " />
            <div v-for="item in data">
              <!-- <div v-for="item in data">{{ item.id }}</div> -->
              <!-- <van-cell title="{{ item.id }}" value="内容" /> -->
              <van-cell value="  " size="large" is-link>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="custom-title">{{ item.title }}</span>
                </template>
              </van-cell>
            </div></van-popup
          >
        </li>
        <li
          v-for="(item, index) in data"
          :key="item.id"
          class="shrink-0 px-2 py-0.5 z-10 duration-200 hover:underline text-opacity-50"
          role="presentation"
          :ref="setItemRef"
          :class="{
            'text-zinc-500': currenIndex === index
          }"
          @click="onItemClick(index)"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { getCategory } from '@/api/category.js'
import axios from 'axios'
import { onBeforeUpdate, ref, watch } from 'vue'
import { onMounted } from 'vue'
import { Icon, Button, Popup, Cell, CellGroup } from 'vant'
import { useScroll } from '@vueuse/core'

defineProps({
  data: {
    type: Array,
    required: true
  }
})
//滑块样式
const sliderStyle = ref({
  transform: 'translateX(0px)',
  width: '52px'
})
//选中item下标
const currenIndex = ref(0)
let itemsRefs = []
//获取所有的item元素
const setItemRef = (el) => {
  if (el) {
    itemsRefs.push(el)
  }
}
onBeforeUpdate(() => {
  itemsRefs = []
})
const ulTarget = ref(null)
const { x: ulScollLeft } = useScroll(ulTarget)
watch(currenIndex, (val) => {
  const { left, width } = itemsRefs[val].getBoundingClientRect()
  sliderStyle.value = {
    transform: 'translateX(${ulScollLeft.value+left-10}px)',
    width: width + 'px'
  }
})
// item 点击事件
const onItemClick = (index) => {
  currenIndex.value = index
}

const show = ref(false)
const showPopup = () => {
  show.value = true
}
</script>

<style>
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
</style>
